<html>
<head></head>
<p> ---------------token---------------</p>

<div>
    <input type="text" id="input_uid" value="user123" disabled><br/>
    <!--<button id="btn_get_token">获取 token</button> <br/>-->
    <textarea id="show_result" disabled>这里显示结果</textarea><br/>
</div>
<p>---------------上传用户图片---------------</p>

<div>
    <form id="upload_user">
        <!--<input type="text" name="uid" value="user123"><br/>-->
        <!--<input type="text" name="token" id="token" value="token"><br/>-->
        <input type="file" name="face" id="select_user_file"><br/>
        <input type="submit" value="上传用户脸部">

    </form>
    <div id="user_preview"></div>

</div>

<p>---------------选择更换---------------</p>

<div>
    <button id="btn_get_part">获取 明星脸</button>
    <div class="face_part">
        眉毛
        <select name="brow" id="selector_brow">
            <option value="null" selected>请选择</option>
        </select><br/>

        <div class='part_preview' id="brow_preview"></div>
    </div>
    <div class="face_part">
        眼睛
        <select name="eye" id="selector_eye">
            <option value="null" selected>请选择</option>
        </select><br/>

        <div class='part_preview' id="eye_preview"></div>
    </div>
    <div class="face_part">
        鼻子
        <select name="nose" id="selector_nose">
            <option value="null" selected>请选择</option>
        </select><br/>

        <div class='part_preview' id="nose_preview"></div>
    </div>
    <div class="face_part">
        嘴巴
        <select name="mouse" id="selector_mouse">
            <option value="null" selected>请选择</option>
        </select><br/>

        <div class='part_preview' id="mouse_preview"></div>
    </div>
</div>

<p>---------------合成展示---------------</p>

<div>
    <button id="btn_render">更换</button>
</div>
</body>


<script src="/js/jquery.js"></script>
<script src="/js/index.js"></script>
<script>
    var show_result = $('#show_result');
    var uid = $('#input_uid').val();
    var token;
    function showInfo(objOrStr) {
        if (typeof objOrStr === 'object') objOrStr = JSON.stringify(objOrStr);
        show_result.val(objOrStr);
    }

    // 获取token
    $(document).ready(function () {
        uid = $('#input_uid').val();
        getToken(uid, function (data, status) {
            console.log(data);
            if (data.errCode != 0) return showInfo(data);
            showInfo(data.result);
            token = data.result.token;
        });
    });

    // ==================上传原始图片
    // 选取图片
    var face;
    var ufaceid;
    $('#select_user_file').on('change', function (event) {
        console.log('uploadFile');
        face = event.target.files[0];
        if (!face) return;
        var reader = new FileReader();
        reader.readAsDataURL(face);
        reader.onload = function (e) {
            var fileData = e.target.result;
            $('#user_preview').html("<img class='itemView' width='150' padding='5px'/>");
            $('.itemView')[0].src = fileData;
        };
    });

    // 上传用户脸
    $('form#upload_user').submit(function (event) {
        console.log('bbbbbbb');
        event.preventDefault();
        if (!uid) {
            showInfo('没有uid 请刷新');
            return false;
        }
        if (!token) {
            showInfo('没有token');
            return false;
        }
        if (!face) {
            showInfo('没有选择用户图片');
            return false;
        }
        uploadUser(token, face, function (err, data) {
            if (err) return showInfo(err);
            if (data.errCode != 0) return showInfo(data);
            showInfo(data.result);
            ufaceid = data.result.ufaceid;
        });
        return false;
    });

    // ===================获取明星脸
    var faceParts;
    $('#btn_get_part').on('click', function (e) {
        getFaceParts(token, function (data, status) {
            console.log(data);
            if (data.errCode == 0) faceParts = data.result;
            showInfo(faceParts);
            if (!faceParts) return;

            // 眉毛
            var brow = faceParts.brow;
            var selector_brow = $('#selector_brow');
            createSelectorOption(brow, selector_brow);
            optionChange(selector_brow, $('#brow_preview'));

            // 眼睛
            var eye = faceParts.eye;
            var selector_eye = $('#selector_eye');
            createSelectorOption(eye, selector_eye);
            optionChange(selector_eye, $('#eye_preview'));

            // 鼻子
            var nose = faceParts.nose;
            var selector_nose = $('#selector_nose');
            createSelectorOption(nose, selector_nose);
            optionChange(selector_nose, $('#nose_preview'));

            // 嘴巴
            var mouse = faceParts.mouse;
            var selector_mouse = $('#selector_mouse');
            createSelectorOption(mouse, selector_mouse);
            optionChange(selector_mouse, $('#mouse_preview'));
        });
    });

    function createSelectorOption(cateList, selector) {
        if (!cateList || cateList.length === 0) return;
        cateList.forEach(function (item) {
            $(selector).append(
                    $('<option>', {
                        imgurl: item.url,
                        partid: item.partid,
                        starid: item.starid,
                        otype: item.otype,
                        text: item.desc || (item.starid + '号明星')
                    })
            );
        });
    }

    function optionChange(selector, divPutImg) {
        selector.on('change', function () {
            var selected = $("option:selected", this);
            var url = selected.attr('imgurl');
            if (url) {
                var tagImg = "<img class='itemView' src=" + url + " width='75' padding='5px'/>";
                divPutImg.html(tagImg);
            } else {
                divPutImg.empty();
            }
        });
    }

    // ===================合成,返回
    $('#btn_render').on('click', function () {
        if (!token) {
            showInfo('没有token,请先获取token');
            return false;
        }
        if (!ufaceid) {
            showInfo('没有ufaceid, 请先上传图片');
            return false;
        }
        // brow eye nose mouse
        var partids = collectSelectParts();
        if (!partids) {
            showInfo('请选择至少一个 更换的部位');
            return false;
        }
        var obj = {token: token, uid: uid, ufaceid: ufaceid, partids: partids};
        console.log(obj);
        $('#rendererd').remove(); // remove old

        render(obj, function (err, data) {
            if (err) return showInfo(err);
            if (data.errCode != 0) return showInfo(data);
            showInfo(data.result);
            // display
            var src = data.result.resultUrl;
            $('#user_preview').append("<img id='rendererd' class='itemView' width='150' padding='5px'/>");
            $('.itemView')[1].src = src + '?dummy=' + (_globalRdmInt++); // disable cache
        });
    });
    function collectSelectParts() {
        var parts = [];
        var sArr = ['selector_brow', 'selector_eye', 'selector_nose', 'selector_mouse'];
        var partid;
        for (var key of sArr) {
            var selected = $('#' + key + ' option:selected');
            partid = selected.attr('partid');
            console.log('partid=%s', partid);
            if (typeof partid !== 'undefined') {
                parts.push(partid);
            }
        }
        return parts.join(',');
    }

    var _globalRdmInt = 1;
</script>
</html>